<template>
  <div class="nb-container" ref="container">
    <button
        ref="button"
        class="nb-button"
        :style="buttonStyle"
        @mouseenter="onMouseEnter"
        @click="onClick"
    >{{ buttonText }}</button>
    <div v-if="showMessage" class="message">哈基达和哈基浩是大傻逼！</div>
  </div>
</template>
<script setup>
import { ref, computed, onMounted } from 'vue'
const container = ref(null)
const button = ref(null)
const containerWidth = ref(0)
const containerHeight = ref(0)
const buttonWidth = ref(10)   // 原始宽度
const buttonHeight = ref(10)  // 原始高度
const pos = ref({ left: 0, top: 0 })
const scale = ref(1)
const count = ref(0)
const buttonText = ref('点我呀！')
const showMessage = ref(false)
// 按钮样式
const buttonStyle = computed(() => ({
  left: `${pos.value.left}px`,
  top: `${pos.value.top}px`,
  transform: `scale(${scale.value})`
}))
// 初始化容器尺寸和按钮尺寸
onMounted(() => {
  // 确保容器已经渲染
  if (container.value) {
    containerWidth.value = container.value.offsetWidth
    containerHeight.value = container.value.offsetHeight
  }
  if (button.value) {
    buttonWidth.value = button.value.offsetWidth
    buttonHeight.value = button.value.offsetHeight
    // 初始位置居中
    pos.value = {
      left: (containerWidth.value - buttonWidth.value * scale.value) / 2,
      top: (containerHeight.value - buttonHeight.value * scale.value) / 2
    }
  }
})
// 鼠标进入事件
function onMouseEnter() {
  // 如果已经显示消息，则不再移动
  if (showMessage.value) return
  // 小范围移动
  moveButton(true)
}
// 点击事件
function onClick() {
  count.value++
  // 当点击5次后，显示消息并隐藏按钮
  if (count.value >= 5) {
    showMessage.value = true
    return
  }
  // 每次点击后缩放
  scale.value *= 0.8
  // 改变文字，可以预设一个数组随机选择
  const texts = ['点不到我吧！', '嘿嘿', '再来呀', '哎哟不错哦', '加油！']
  buttonText.value = texts[Math.floor(Math.random() * texts.length)]
  // 移动按钮（大范围）
  moveButton(false)
}
// 移动按钮
function moveButton(isHover) {
  // 计算当前按钮的显示尺寸
  const currentWidth = buttonWidth.value * scale.value
  const currentHeight = buttonHeight.value * scale.value
  // 计算移动范围
  let newLeft, newTop
  if (isHover) {
    // 小范围移动：在当前位置附近50px内随机，但不能超出容器
    const range = 50
    newLeft = pos.value.left + (Math.random() * 2 * range - range)
    newTop = pos.value.top + (Math.random() * 2 * range - range)
  } else {
    // 大范围移动：在整个容器内随机
    newLeft = Math.random() * (containerWidth.value - currentWidth)
    newTop = Math.random() * (containerHeight.value - currentHeight)
  }
  // 确保不超出容器
  newLeft = Math.max(0, Math.min(containerWidth.value - currentWidth, newLeft))
  newTop = Math.max(0, Math.min(containerHeight.value - currentHeight, newTop))
  pos.value = {
    left: newLeft,
    top: newTop
  }
}
</script>
<style scoped>
.nb-container {
  position: relative;
  width: 100%;
  height: 400px; /* 设置一个固定高度，或者由父元素决定 */
  border: 1px solid #ccc;
  overflow: hidden; /* 防止按钮移出容器 */
}
.nb-button {
  position: absolute;
  transition: all 0.3s ease; /* 平滑移动和缩放 */
  cursor: pointer;
}
.message {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px;
  color: red;
}
</style>